<template>
	<view>
		<view class="headerIcon" :style="{ 'padding-top': statusBarHeight + 'px' }">
			<!-- //头部导航加padding给状态栏腾地 -->
		</view>
		<view class="header">
			<view class="bg">
				<view class="setting" @click="jump('/pages/setting/setting')">
					<image src="../../static/me/sehzhi@2x.png" mode=""></image>
				</view>
				<view class="info">
					<view class="left">
						<image v-if="user.avatar!=''" :src="user.avatar" mode=""></image>
						<image v-else src="../../static/icon/pic.png" mode=""></image>
					</view>
					<view class="right">
						<view class="name">{{ user.nickname }}</view>
						<view class="background">
							<text class="level-name">{{ grade }}</text>
							<view class="level-name">会员编号：{{ user.account }}</view>
						</view>
					</view>
				</view>
				<view class="message">
					
					<!-- <view v-if="user.is_agent == 1">推荐码：{{ user.icode }}</view> -->
				</view>
			</view>
		</view>
		<!-- <view class="banner">
			<view class="pic">
				<image src="../../static/me/tequan@2x.png" mode=""></image>
				<view class="line"></view>
				<view class="text">
					<view class="tips1">购买礼包享受更多权益</view>
					<view class="tips2">即刻开始，拼享生活</view>
				</view>
				<view class="btn" @click="jump('/pages/commonality/goods')">立即购买</view>
			</view>
		</view> -->
		<view class="container">
			<view class="wallet">
				<text class="text">我的钱包</text>
			</view>
			<view class="details">
				<!-- <view class="content" > -->
					<view class="content" @click="jump('/pages/user/balance?pageType=1')">
					<image src="../../static/me/yue@2x.png" mode=""></image>
					<view class="num">
						<view class="money">￥{{ user.credit2 }}</view>
						<view class="text">购物积分</view>
					</view>
				</view>
				<view class="line"></view>
				<!-- <view class="content"> -->
						<view class="content" @click="jump('/pages/user/balance?pageType=2')">
					<image src="../../static/me/score.png" mode=""></image>
					<view class="num">
						<view class="money">￥{{ user.credit3 }}</view>
						<view class="text">现金积分</view>
					</view>
				</view>

	<!-- 			<view class="line"></view>
				<view class="content" @click="sign">
					<image src="../../static/me/jifern@2x.png" mode=""></image>
					<view class="num">
						<view class="text">积分签到</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="container">
			<view class="order-text">
				<view class="order">
					<text class="text">我的订单</text>
				</view>
				<view class="all" @click="jump('/pages/order/order')">
					<text>查看全部</text>
					<image src="../../static/me/chakanquanbu@2x.png" mode=""></image>
				</view>
			</view>
			<view class="detail">
				<view class="content" @click="jump('/pages/order/order?id=1')">
					<image src="../../static/me/daifukuan.png" mode=""></image>
					<view class="num" v-if="num.count_1 != 0">{{ num.count_1 }}</view>
					<view class="text">待付款</view>
				</view>
				<view class="content" @click="jump('/pages/order/order?id=2')">
					<image src="../../static/me/daifahuo.png" mode=""></image>
					<view class="num" v-if="num.count_2 != 0">{{ num.count_2 }}</view>
					<view class="text">待发货</view>
				</view>
				<view class="content" @click="jump('/pages/order/order?id=3')">
					<image src="../../static/me/daishouhuo.png" mode=""></image>
					<view class="num" v-if="num.count_3 != 0">{{ num.count_3 }}</view>
					<view class="text">待收货</view>
				</view>
				<view class="content" @click="jump('/pages/order/sale')">
					<image src="../../static/me/shouhou.png" mode=""></image>
					<view class="num" v-if="num.count_5 != 0">{{ num.count_5 }}</view>
					<view class="text">售后</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view class="order-text">
				<view class="order">
					<text class="text">我的服务</text>
				</view>
			</view>
			<view class="detail2">
				<!-- <view class="content" @click="jump('/pages/user/dictyosome')">
					<image src="../../static/card/icon6.png" mode=""></image>
					<view class="text">七人团</view>
				</view>
				<view class="content" @click="jump('/pages/commonality/order')">
					<image src="../../static/me/wangti@2x.png" mode=""></image>
					<view class="text">拼团订单</view>
				</view>
				<view class="content" @click="jump('/pages/commonality/goodsList')">
					<image src="../../static/card/icon5.png" mode=""></image>
					<view class="text">自动拼团</view>
				</view> -->
				<view class="content" @click="jump('/pages/service/team')">
					<image src="../../static/me/tuandui@2x.png" mode=""></image>
					<view class="text">我的团队</view>
				</view>
				<view class="content" @click="share('/pages/service/qrcode')">
					<image src="../../static/me/yaoqing@2x.png" mode=""></image>
					<view class="text">推广链接</view>
				</view>
				<view class="content" @click="jump('/pages/order/address?save=0')">
					<image src="../../static/me/dizhi@2x.png" mode=""></image>
					<view class="text">地址管理</view>
				</view>
				<view class="content" @click="jump('/pages/service/collect')">
					<image src="../../static/me/shoucang@2x.png" mode=""></image>
					<view class="text">我的收藏</view>
				</view>
				<!-- <view class="content" @click="jump('/pages/area/agency')">
					<image style="width: 64upx;height: 64upx;" src="../../static/icon/daili.png" mode=""></image>
					<view class="text">区域代理</view>
				</view> -->
				<!-- <view class="content" @click="jump('/pages/user/discount')">
					<image style="width: 68upx;height: 68upx;" src="../../static/img/discount.png" mode=""></image>
					<view class="text">优惠券</view>
				</view> -->
			</view>
			<view style="height: 140upx; background-color: #f3f3f3;"></view>
		</view>
		<!-- 签到成功 -->
		<u-popup v-model="show" mode='center'>
	<!-- 		<view class="sign-hint">
				<image src="../../static/icon/bg.png" mode="aspectFit"></image>
				<view class="content">
					<view class="title">签到成功</view>
					<view class="count">+{{get_credit}}签到积分</view>
					<view class="day">你已连续签到{{con_day}}天！继续加油~</view>
					<view class="sign-list">
						<view class="box" v-for="(item,index) in signday" :key='index' :class="{active:item<=con_day}">
							<image src="../../static/icon/ints.png" mode="" v-if="item<=con_day"></image>
							<image src="../../static/icon/int.png" mode="" v-else></image>
							<view class="">第{{item}}天</view>
						</view>
					</view>
					<view class="know" @click="know">知道了</view>
					<view class="tom">明天记得签到</view>
				</view>
			</view> -->
		</u-popup>

		<!-- #ifndef APP-PLUS -->
		<!-- <tabbar :current-page="4"></tabbar> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import service from '@/store/service.js';
	export default {
		data() {
			return {
				statusBarHeight:uni.getStorageSync('statusBarHeight'),//状态栏高度
				user: '',
				num: '',
				isApplyInfo: false, //区域代理是否申请成功
				singing: true,
				show: false,
				get_credit: '', // 签到获得签到积分
				con_day: '', //连续签到天数
				grade: ''
			};
		},
		onShow: function() {
			this.isApplyInfo = false;
			this.getUserInfo();
			this.getOrderNun();
			this.getAgent()
		},
		computed: {
			//签到天数,展示数组
			signday() {
				let day = this.con_day //当前连续签到天数
				let arr = []
				if (day) {
					let current = Math.floor(day / 8) //当前为第几轮签到，每轮8天
					for (let i = 0; i <= 1000; i++) { //1000为连续签到极限
						arr.push(i)
					}
					//第1轮 slice(1,8) 第2轮 slice(9,16)........
					return arr.slice(current * 8 + 1, (current + 1) * 8 + 1) //当前 签到成功展示 天数数组
				}
			}
		},
		methods: {
			getAgent() {
				var self = this;
				self.$http.get(service.api.user.getAgent, {}).then(function(res) {
					console.log(res, 111);
					var list = res.data;
					self.grade = list.levelname;
				});
			},
			//签到
			sign() {
				let self = this
				if (!self.singing) {
					self.$api.msg('今天已签到')
					return
				}
				self.$http.post(service.api.points.sign, {}).then(res => {
					console.log('签到积分签到====>>', res)
					if (res.code == 1) {
						self.singing = !self.singing
						self.show = !self.show
						self.get_credit = res.data.get_credit
						self.con_day = res.data.order
						self.getUserInfo()

					} else {
						self.$api.msg(res.info)
					}
				})
			},
			know() {
				this.show = !this.show
				console.log(this.show);
			},
			share(url) {
				let self = this
				if (self.user.is_agent == 0) {
					uni.showToast({
						icon: 'none',
						title: '您暂无推广权限'
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			jumpNot() {
				uni.showToast({
					icon: 'none',
					title: '暂未开放'
				});
			},
			jumpTab(url) {
				uni.switchTab({
					url: url
				});
			},
			// jump(url) {
			// 	uni.navigateTo({
			// 		url: url
			// 	});
			// },
			jump(url) {
				// console.log(this.isApplyInfo, 'isapppp');
				if (url == '/pages/area/agency') {
					if (this.isApplyInfo) {
						// console.log(true);
						uni.navigateTo({
							url: '../area/agencyCenter'
						})
					} else {
						uni.navigateTo({
							url: url
						});
					}
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			getUserInfo() {
				var self = this;
				self.$http.post(service.api.user.info, {}).then(function(res) {
					// console.log(res);
					var list = res.data;
					self.user = list;
				});
			},
			getOrderNun() {
				var self = this;
				self.$http.post(service.api.user.orderCount, {}).then(function(res) {
					// console.log(res.data.count_1);
					self.num = res.data;
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/ .u-mode-center-box {
		background-color: rgba(255, 255, 255, 0) !important;
	}

	.header {
		.bg {
			background-image: url(../../static/img/beijing@2x.png);
			background-size: 100% 100%;
			height: 308upx;

			.setting {
				image {
					width: 48upx;
					height: 48upx;
					position: absolute;
					right: 30upx;
					top: 60upx;
				}
			}

			.info {
				display: flex;
				align-items: center;
				padding: 68upx 0 0 38upx;

				.left {
					image {
						width: 100upx;
						height: 100upx;
						margin-right: 38upx;
						border-radius: 50%;
					}
				}

				.right {
					position: relative;

					.name {
						font-size: 32upx;
						color: #fff;
						font-weight: bold;
						margin-bottom: 8upx;
					}

					image {
						width: 140upx;
						height: 44upx;
					}

					.grade {
						font-size: 18upx;
						transform: scale(0.9);
						color: #a57878;
						position: absolute;
						top: 64upx;
						left: 40upx;
					}
				}
			}
		}

		.message {
			display: flex;
			color: #fff;
			margin-top: 10upx;

			>view {
				font-size: 18upx;
				// transform: scale(0.9);
			}

			.member {
				margin: 0 16upx 0 38upx;
			}
		}
	}

	.banner {
		background-image: url(../../static/me/beijing@2x.png);
		width: 92%;
		height: 118upx;
		background-size: 100% 100%;
		margin: 0 0 40upx 30upx;
		position: absolute;
		top: 260upx;

		.pic {
			margin: 10upx 0 0 32upx;
			display: flex;
			align-items: center;

			image {
				width: 78upx;
				height: 60upx;
				margin-right: 40upx;
			}

			.line {
				width: 2upx;
				height: 50upx;
				background: #ebebeb;
				margin-right: 28upx;
			}

			.tips1 {
				font-weight: bold;
				color: #565656;
			}

			.tips2 {
				font-size: 24upx;
				font-weight: bold;
				color: #878787;
			}

			.btn {
				margin-left: 60upx;
				background: #ffffff;
				border: 2upx solid #666666;
				padding: 0 12upx;
				font-weight: 800;
			}
		}
	}

	.container {
		box-shadow: 1upx 3upx 15upx 0 #eeeeee, 0upx -4upx 16upx 0 #f4f4f4;
		border-radius: 12upx;
		background-color: #fff;
		margin: 0 26upx 0 30upx;

		.wallet {
			display: flex;
			align-items: center;
			margin: -40upx 25upx 0 30upx;
			padding: 20upx 0 42upx 0;

			.line {
				width: 6upx;
				height: 28upx;
				background: #f81149;
				margin: 0 8upx 0 20upx;
			}

			.text {
				font-size: 32upx;
				font-weight: 800;
				color: #4d5467;
			}
		}

		.details {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0 30upx;

			.content {
				display: flex;
				align-items: center;
				padding-bottom: 30upx;

				image {
					width: 48upx;
					height: 48upx;
					margin-right: 16upx;
				}
			}

			.num {
				display: flex;
				flex-direction: column;
				align-items: center;

				.money {
					font-size: 32upx;
					font-weight: bold;
					color: #f81149;
				}

				.text {
					font-size: 26upx;
					font-weight: 500;
					color: #4d5467;
					// transform: scale(0.9);
				}
			}

			.line {
				width: 3upx;
				height: 50upx;
				background: #eeeeee;
			}
		}
	}

	.container {
		background-color: #fff;

		.order-text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20upx 25upx 0 30upx;
			padding: 20upx 0 42upx 0;

			.order {
				display: flex;
				align-items: center;

				// margin: 20upx 25upx 0 30upx;
				// padding: 20upx 0 42upx 0;
				.line {
					width: 6upx;
					height: 28upx;
					background: #f81149;
					margin: 0 8upx 0 20upx;
				}

				.text {
					font-size: 32upx;
					font-weight: 800;
					color: #4d5467;
				}

				// .all{

				// font-size: 18upx;
				// font-weight: bold;
				// color: #697085;
				// transform: scale(0.9);
				// }
			}
		}

		.detail {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 88upx 0 72upx;

			.content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 30upx;
				position: relative;

				image {
					width: 58upx;
					height: 58upx;
				}

				.num {
					width: 34upx;
					height: 34upx;
					font-size: 24upx;
					background: #ffffff;
					border: 2upx solid #f8124a;
					border-radius: 13upx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #f8124a;
					position: absolute;
					top: -16upx;
					left: 52upx;
				}
			}

			.num {
				.money {
					font-size: 32upx;
					font-weight: bold;
					color: #f81149;
				}

				.text {
					font-size: 20upx;
					font-weight: 500;
					color: #4d5467;
					transform: scale(0.9);
				}
			}

			.line {
				width: 3upx;
				height: 50upx;
				background: #eeeeee;
			}
		}
	}

	.container {
		background-color: #fff;

		.order-text {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 20upx 25upx 0 30upx;
			padding: 20upx 0 42upx 0;

			.order {
				display: flex;
				align-items: center;

				// margin: 20upx 25upx 0 30upx;
				// padding: 20upx 0 42upx 0;
				.line {
					width: 6upx;
					height: 28upx;
					background: #f81149;
					margin: 0 8upx 0 20upx;
				}

				.text {
					font-size: 32upx;
					font-weight: 800;
					color: #4d5467;
				}
			}

			.all {
				display: flex;
				align-items: center;

				text {
					font-size: 18upx;
					font-weight: bold;
					color: #697085;
					transform: scale(0.9);
				}

				image {
					width: 8upx;
					height: 12upx;
					margin-left: 6upx;
					margin-top: 2upx;
				}
			}
		}

		.detail2 {
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			// justify-content: space-between;
			// margin: 0 54upx;
			.content {
				width: 33.33%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 46upx;

				image {
					width: 52upx;
					height: 52upx;
					margin-bottom: 20upx;
				}

				.text {
					font-size: 26upx;
					font-weight: bold;
					color: #545054;
				}
			}

			.num {
				.money {
					font-size: 32upx;
					font-weight: bold;
					color: #f81149;
				}

				.text {
					font-size: 20upx;
					font-weight: 500;
					color: #4d5467;
					transform: scale(0.9);
				}
			}

			.line {
				width: 3upx;
				height: 50upx;
				background: #eeeeee;
			}
		}
	}

	.level-name {
		color: #fff;
	}

	.sign-hint {
		width: 100vw;
		height: 100vh;
		// background-image: url(../../static/int/bg.png);
		// background-size: 100%;

		image {
			width: 100%;
			height: 100%;
			margin-left: -20upx;
			position: relative;
		}

		.content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -35%);
			text-align: center;
			width: calc(100vw - 30%);

			.title {
				color: #242424;
				font-size: 56upx;
			}

			.count {
				color: #F4275A;
				font-size: 36upx;
			}

			.day {
				color: #666666;
				font-size: 28upx;

			}

			.sign-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				margin-top: 40upx;

				.box {
					width: 98upx;
					height: 98upx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-around;
					color: #F55675;
					box-sizing: border-box;
					padding: 10upx 0;
					margin: 0 10upx 20upx 10upx;
					background: #FAE8EC;
					border-radius: 50%;

					image {
						width: 27upx;
						height: 29upx;
						margin-left: 3upx;
					}

					>view {
						font-size: 24upx;
						white-space: nowrap;
					}
				}

				.active {
					background: linear-gradient(0deg, #F4275A, #F43968, #FF6D91);
					color: #fff;
				}
			}
		}

		.know {
			width: 285upx;
			height: 80upx;
			line-height: 80upx;
			margin: 20upx auto;
			color: #fff;
			font-size: 32upx;
			background: linear-gradient(0deg, #F4275A, #F43968, #FF6D91);
			box-shadow: 0upx 3upx 8upx 1upx rgba(228, 18, 66, 0.25);
			border-radius: 40upx;
		}

		.tom {
			color: #999;
			font-size: 24upx;
		}
	}
</style>
